<template>
  <div class="search">
    <div class="inp">
      <el-input
        :placeholder="placeholder"
        v-model="search"
        @keydown.enter.native="toSearch"
        clearable
      >
      </el-input>
    </div>
    <div class="btn">
      <el-button type="primary" icon="el-icon-search" @click="toSearch"
        >搜索</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  props: ["placeholder"],
  data() {
    return {
      search: "",
    };
  },
  methods: {
    toSearch() {
      const path = this.$route.path;
      if (this.search !== "") {
        this.$router.push({
          query: {
            search: this.search,
          },
        });
      } else {
        this.$emit("clearSearch");
        this.$router.push(path);
      }
    },
  },
};
</script>

<style scoped>
.search {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translate(0%, -50%);
  width: 40%;
  height: 100%;
}

.inp {
  float: left;
  width: 70%;
}

.btn {
  float: left;
  margin-left: 20px;
}
</style>